<template>
  <div class="like-container" @click="onLike">
    <span class="iconfont" v-if="like">&#xe668;</span>
    <span class="iconfont" v-else>&#xe669;</span>
    <span class="count">{{count}}</span>
  </div>
</template>

<script>
export default {
  name: 'Like',
  props: {
    likeCount: Number,
    likeStatus: Boolean
  },
  data () {
    return {
      count: this.likeCount,
      like: this.likeStatus
    }
  },
  methods: {
    onLike () {
      this.like = !this.like
      this.count = this.like ? ++this.count : --this.count
      let behavior = this.like ? 'like' : 'cancel'
      this.$emit('like', behavior)
    }
  },
  watch: {
    likeCount: {
      handler () {
        this.count = this.likeCount
      }
    },
    likeStatus: {
      handler () {
        this.like = this.likeStatus
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .like-container
    display: inline-flex
    flex-direction: row
    padding: .1rem
    width: .9rem;
    .iconfont
      font-size: .32rem
      color: #fa5151
    .count
      font-size: .24rem
      line-height: .24rem
      color: #bbb
      position: relative
      bottom: .1rem
      left: .06rem
</style>
